HTML Form Elements
HTML forms use different elements to collect user data.
<input>
Used to take user input.
Example
<input type="text" name="username">
It can be text, radio, checkbox, number, etc.
<label>
Gives a name/description to an input.
Example
<label for="name"> Name: </label>
<input type="text" id="name">
clicking the label selects the input
<select> and <option>
Creates a dorp-down list.
Example
<select name="car">
<option value="bmw"> BMW </option>
<option value="AUDI"> Audi </option>
</select>
- option = item in the list
- Use select to pre-select one
- Use multiple to allow more than one selection
<textarea>
Used for multi-line text (like messages).
Example
<textarea name="message" rows="4" cols="30"> </textarea>
<button>
Creates a clikable button.
Example
<button type="submit"> Submit </button>
<fieldset> and <legend>
Group related form items.
Example
<fieldset>
<legend> Info </legend>
<input type="text" name="fname">
</fieldsett;
<details>
Shows suggestions while typing.
Example
<input list="browsers">
<details id="browsers">
<option vlaue="chrome">
<option value="firefox">
</details>
<output>
Example
<output name="result"> </output>
Quick Summary
- <input> User input
- <label> Input title
- <select> Drop-down
- <textarea> Multi-line text
- <button> Click button
- <fieldset> Group items
- <details> suggestions
- <output> Show result
